<!--查看博客-->
<template>
  <div class="blogdetail">
    <div class="container blogdetail-frame">
      <div class="title-frame">
        <p class="">{{ blogInfo.title }}</p>
      </div>
      <div class="info-frame">
        <span class="auth">{{ blogInfo.author }}</span>
        <span class="time">{{ blogInfo.created_at.substring(0, 10) }}</span>
      </div>
      <div class="content-frame">
        <div v-html="blogInfo.content"></div>
      </div>
      <div class="other-frame">
        <div class="tag-frame">
          <van-icon name="label-o" size="0.8rem" />
          <span>LABEL</span>
        </div>
        <div
          class="tag-frame"
          v-for="(item, tag) in blogInfo.tags"
          :key="'tag' + tag"
        >
          <span>{{ item }}</span>
        </div>
      </div>
      <div class="thumes-frame">
        <div class="thumes-panel" style="margin-right: 0.5rem">
          <van-icon name="eye-o" size="1rem" />
          <span class="thumes-label">{{ blogInfo.views }}</span>
        </div>
        <div class="thumes-panel" style="cursor: pointer" @click="thumdsArtice">
          <van-icon name="good-job-o" size="1rem" v-if="!blogInfo.thumbs_up" />
          <van-icon name="good-job" size="1rem" v-else />
          <span class="thumes-label">{{ blogInfo.like }}</span>
        </div>
      </div>
      <div class="comment-frame">
        <div class="comment-fast">
          <textarea
            class="comment-past"
            v-model="comment.comment"
            :placeholder="comment.placeholder"
            maxlength="250"
            :disabled="!isLogin"
          >
          </textarea>
          <div class="tips-frame">
            <span class="label-text">{{ comment.comment.length }}/250</span>
            <div class="tips-panel">
              <div class="submit-btn" @click="submitComment">Submit</div>
            </div>
          </div>
        </div>
      </div>
      <div class="commentList-frame">
        <div class="comment-title">
          The Latest Comments ({{ comment.total }})
        </div>
        <div class="commentList-panel" v-if="!loading">
          <div
            class="commentList-fast"
            v-for="(item, index) in comment.list"
            :key="index"
          >
            <div class="comment-frame">
              <p class="auth-frame">
                <span class="auth">{{ item.user.nick_name }} </span>
                <span class="time">
                  {{ item.user.created_at.substring(0, 10) }}</span
                >
              </p>
              <p class="content">
                {{ item.content }}
              </p>
            </div>
          </div>
        </div>
        <Loading v-if="loading" />
        <Nodata v-if="comment.list.length == 0 && !loading" />
      </div>
      <van-pagination
        v-model="commentForm.page"
        :total-items="comment.total"
        :items-per-page="commentForm.page_size"
        :show-page-size="5"
        class="col-sm-12 col-md-8 col-lg-6 col-xl-4"
        v-if="comment.total > commentForm.page_size && !loading"
        @change="pageChange"
      >
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
  </div>
</template>
<script>
import bd from "./blogdetail";
export default {
  data() {
    return {};
  },
  mixins: [bd.mixin],
};
</script>
<style lang="less" scoped>
@import "./blogdetail.less";
</style>